[レポート]様変わりしていくクリエイティブ世界に適応するため今こそXD！のお話 #Adobe MAX Japan

株式会社コンセントの変遷。

 

12/3に開催された「Adobe MAX Japan」では沢山のクリエイティビティが刺激されるセッションが行われました。

今回自分が受講したセッションのうち印象的なものをまとめました。

 

セッションレポート②

15:30 - 16:20

Adobe XDがプロジェクトメンバーを繋ぐ！導入事例から学ぶ、チームビルディングとデザインシステム活用の試み

登壇者：江辺 和彰さん（コンセント）

セッション情報URL：https://maxjapan.adobe.com/sessions/3

……

コンセント江辺さんのセッションでは、ディレクター目線のデザインシステムについて、XDを利用したユースケースについて詳しくご紹介いただけました。

社会の価値観が多様化している

ネットやモバイルなどITの普及に酔ってシステムの変化のスピードが急速に早まっている。

この「変化している」の文言、いろいろなセッションで毎回聞きました。ものすごく変化をしている時代なんですね。

 

変化をしている制作現場ではクライアントと制作会社がやりとしていていたのが、最近はクライアントや制作ベンダーとチームを作る。チームの作り方も変わってきている。つまり、プロジェクトは共創型になってきている。

・新しいことへの積極的なチャレンジ

・早い変化への対応

・組織を超えた共創型プロジェクト

↓

チームのあり方にも変化が

いままではトップから下への中央集権型チーム。ウォーターフォール型。

いまはフラットの形で個人が決定権を持ち、自発的に動く。アジャイル型。

……

コンセントの受注する案件では多くのページを作ることが多い。とても大変。

我々は「リリースするまで」と考えてしまうが、しかし、クライアントにとっては、プロダクトはリリースしてからが本番。

リリースしてからを考えて作っていくのが大事。

……

ここで質問。デザインシステムとはなにか？

調べてもみればみるほどわからない・・・・。人によって深度や方向性の違いがある。

このセッションでの定義は、

・デザインの粒度を定めて一貫性をもたせる。

・チームでの制作が効率的に行える。

・リリースされても運用できるようにする。

しかし…

変化に強いことと、全体最適のシステムは、相反することが多い。というかうまくいかないことが多い。

そこでXD。

XDを使うことによってうまくいったユースケース

XDはアップグレードによって、本格的にデザインシステムに取り組めるようになった。

・コンポーネント機能

・ドキュメント間でのアセットの共有（クラウドが前提）

これによって、複数人で作業ができるようになった。

八海山コーポレートサイトリニューアルの事例

実際の八海山ウェブサイト

実際に現場に行って写真を取り、空気感などを感じた。

XDを使って良かったこと

①クライアントサイドで導入するハードルが低い（スタータープランは無料）

・制作メンバーだけじゃなく、クライアントも最新の情報を見れるようになった。

・製作途中の段階でもクライアントが見ることができる。

・途中経過ではアイデアがあったり試行錯誤がある。そういったことも、クライアントを共有できる。

アートボードの複製が簡単なので、ボツにしたものも残しておいてクライアントとのコミニュケーションが豊かになった。リアルタイム編集機能（ベータ）がリリースされたので、「今見てくれてるんだな」といったリアルタイム性のある制作が可能に。

 

②デザインフェーズ以外でも役にたった。

コンポーネント化を考えるフェーズは集中する事が多い。

しかし「リリースされた後でも運用できるようにしないといけない」

運用側もわかっている状態にする必要がある。

実はコンセントでは自社開発パッケージ「CONNECT（コネクト）」を作っていた

デザインからHTML制作までをシームレスに行える構築パッケージ。

 

どのようなサイトにも使用できる標準的なコンポーネントを用意。

コンポーネントの組み合わせで画面を展開でき、レスポンシブWebデザインへの標準対応。

・ID管理がされている。

・トンマナも作れる。

・難しいインストールが必要ない。

このコネクトに、XDをインストールした

 

・最初にサイトの構造を作成

 

・用意していたコンポーネントをぺたぺたはりながらワイヤーフレームをつくる。同時進行でデザインもすすめる。文字、トンマナを決める。

 

・マスターコンポーネントに反映！

 

・もともと引いていたワイヤーにデザインが反映されている。マージン、ボタンサイズの調整などはあるが、どんどんアップデートされていく。

 

・設計とデザインがわかれていたが、融合することができた。

・マスターコンポーネントをもとに、HTML/CSSに反映。マスターを見ればわかるよ、と実装のストレスが無くなった。

 

・これがクライアントも含めて作業できることが大きかった。

・デザイナーとエンジニアの間だけで話されていたものが、クライアントも含められるように。

たとえばこんな困ったあるある

・「目立たせたいから赤にしてよ」

・「全体のことを考えるとやりたくないな〜〜〜・・・・・　パターン増やしたくないし・・・」

デザイナーなら一度は体験したことがあるあるある！

 

XDにすることによって、上記のような説明ができるようになった。

リアルタイム性のあるコミニュケーションも可能に

イメージしづらい画面遷移を検証できるので、打ち合わせの場でのフィードバックをすぐに反映できる。

アジャイル型のコミニュケーションも活性化した。

この八海山プロジェクトの場合に使えたチップス

管理方法

・共同編集を考え、ファイルは分割

・FIX後にFIXのみまとめたファイルを作成。ディレクターがこのページできてます、できてませんの管理が簡単になった。画面のうちぬけていることがすぐわかり、すぐにスタッフに共有できた。

 

・独自ルールをなくすため、マスターコンポーネントは一つのファイルに集約した。

 

・修正→反映のフローがルール化され効率化された

 

XDを使う上での注意点！

カラーマネジメント非対応である。書き出しで色が変わってしまう。

八海山のサイトでは写真を多用していたので、色味の改修が必要だった。

まだ対応する方法はない。トップページなどは別のツールで作成したり書き出すことで対応していた。

まとめ

プロジェクトは共創型へ

①クライアントサイドで導入するハードルが低い　ぐちゃぐちゃなエクセルのようなものはやめよう！

②デザインフェーズ以外でも使える　ブラックボックス化を防ぐ！

③リアルタイム性のあるコミニュケーション　テンポよく進む！

セッションを終えて

「今の世の中は変化が激しい」今回参加したどのセッションでもこのセリフが聞かれました。

環境の変化に適応できない生物は死ぬそうです。自分も化石デザイナーにならないために、XDを積極的に使っていくぞという気持ちを新たにしました。

先日社内でもXDの勉強会が開かれ、特に共同編集の機能が話題になりました。

コンポーネント周りの昨日を味方につけて、いろいろな方にスムーズに共有できるようなフローを作っていきたいです。

セッションレポートはこちら

Keynoteからセッションを拝見していたのですが

今回は３つについてレポートをまとめました。

よければ御覧ください。

……

ユーザーの心を掴む！気持ちいいインタラクションがつくりだすインターフェースデザイン

登壇者：奥田透也さん

……

Adobe XDがプロジェクトメンバーを繋ぐ！導入事例から学ぶ、チームビルディングとデザインシステム活用の試み

登壇者：江辺 和彰さん（コンセント）

……

手間をかけずにコーディングを効率化するデザインシステムの活用法｜Adobe XDのコンポーネント機能とBootstrapの連携

登壇者：久保 知己さん（まぼろし）